﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadAvatar.aspx.cs" Inherits="SonCa.SocialNetwork.Profiles.UploadAvatar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../css/site.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/cropper/lib/prototype.js" language="javascript"></script>
    <script type="text/javascript" src="../js/cropper/lib/scriptaculous.js?load=builder,dragdrop"
        language="javascript"></script>
    <script type="text/javascript" src="../js/cropper/cropper.js" language="javascript"></script>
    <script type="text/javascript">
        function onEndCrop(coords, dimensions) {
            $('hidX1').value = coords.x1;
            $('hidY1').value = coords.y1;
            $('hidX2').value = coords.x2;
            $('hidY2').value = coords.y2;
            $('hidWidth').value = dimensions.width;
            $('hidHeight').value = dimensions.height;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" class="modal">
    <div>
    <asp:Panel ID="pnlUpload" runat="server" Visible="true">
        <div class="divContainerLarge">
        <fieldset>
            <div class="divContainerTitle">
                Upload avatar</div>
            <table width="100%">
                <tr>
                    <td style="width: 205px;">
                        <div style="width: 200px; height: 200px; border: solid 1px #000000; padding: 5px;">
                        <asp:Image runat="server" ID="imgAvatar" Height="200" Width="200" />
                            <%--Avatars can be displayed as large as 200x200 pixels (<i>the size of this box</i>).
                            It is suggested that you do not upload anything smaller or larger than this, as
                            it might stretch/shrink a bit and not look as nice as you had hoped!--%>
                        </div>
                    </td>
                    <td valign="top">
                        <div style="padding: 5px; float: left;">
                            Avatar:
                        </div>
                        <br />
                        <asp:FileUpload Width="270px" Size="28" ID="fuAvatarUpload" runat="server" />
                        <p />
                        <table width="100%">
                            <tr align="right">
                                <td>
                                    <asp:Button CssClass="SiteButton" ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
                                </td>
                            </tr>
                            <tr>
                                <td style="padding: 5px;">
                                    <asp:Label ForeColor="Red" ID="lblMessage" runat="server"></asp:Label>
                                </td>
                            </tr>
                        </table>
                        <p />
                    </td>
                </tr>
            </table>
        </fieldset>
        </div>
    </asp:Panel>
    <asp:Panel ID="pnlCrop" runat="server" Visible="false">
        <asp:HiddenField ID="hidX1" runat="server" />
        <asp:HiddenField ID="hidY1" runat="server" />
        <asp:HiddenField ID="hidX2" runat="server" />
        <asp:HiddenField ID="hidY2" runat="server" />
        <asp:HiddenField ID="hidWidth" runat="server" />
        <asp:HiddenField ID="hidHeight" runat="server" />
        <div class="divContainerLarge">
            <fieldset>
            <div class="divContainerRow">
                <div class="divContainerRow">
                    <div style="width: 300px; height: 100px; float: left;">
                        <b>Chỉnh sửa avatar</b><br />
                        Bạn có thể chỉnh sửa hình ảnh avatar cho phù hợp với kích thước
                        <%--Images come in all shapes and sizes so we have provided you with a tool that will
                        allow you to select the section of your image that you would like to use for your
                        avatar.--%>
                    </div>
                    <div id="previewWrap" />
                </div>
                <div>
                    <asp:Image ImageUrl="~/Images/ProfileAvatar/ProfileImage.aspx" ID="imgCropImage"
                        runat="server" />
                </div>
                <script type="text/javascript" language="javascript">
                    Event.observe(window, 'load', function () {
                        new Cropper.ImgWithPreview('imgCropImage',
                        {
                            previewWrap: 'previewWrap',
                            minWidth: 200,
                            minHeight: 200,
                            ratioDim: { x: 200, y: 200 },
                            displayOnInit: true,
                            onEndCrop: onEndCrop
                        });
                    });
                </script>
                <div class="divContainerFooter">
                    <asp:Button CssClass="SiteButton" ID="btnCrop" Text="Perform Crop" runat="server" OnClick="btnCrop_Click" />
                    <asp:Label ID="lblCropInfo" ForeColor="Red" runat="server"></asp:Label>
                </div>
            </div>
            </fieldset>
        </div>
    </asp:Panel>
    <asp:Panel ID="pnlApprove" runat="server" Visible="false">
        <div class="divContainerLarge">
            <fieldset>
                <div class="divContainerTitle">
                    Kiểm tra avatar mới của bạn</div>
                <div class="divContainerRow">
                    <asp:Image ID="Image1" ImageUrl="~/Images/ProfileAvatar/ProfileImage.aspx" runat="server" />
                </div>
                <div class="divContainerFooter">
                    <asp:Button CssClass="SiteButton" ID="btnStartNew" runat="server" Text="Làm lại" OnClick="btnStartNew_Click" />
                    <asp:Button CssClass="SiteButton" ID="btnComplete" runat="server" Text="Chấp nhận" OnClick="btnComplete_Click" rel="modal:close" />
                </div>
            </fieldset>
        </div>
    </asp:Panel>
    </div>
    </form>
    
</body>
</html>
